<template>
  <div id="app">
    <el-container style="height: 100vh">
      <!-- 顶部导航栏 -->
      <el-header class="header">
        <el-menu
            class="el-menu-demo"
            mode="horizontal"
            background-color="#8de5e3"
            text-color="#fff"
            active-text-color="#ffd04b"
            style="display: grid; grid-template-columns: auto 1fr 2fr 3fr auto;">
          <el-menu-item index="1">
            <img src="@/assets/logo.png" alt="Logo" class="logo">
            <strong>厦门航空-系统管理</strong>
          </el-menu-item>

          <el-menu-item v-if="isLoggedIn()">
            <span>管理员{{ getUsername() }}</span>
          </el-menu-item>

          <el-menu-item v-if="isLoggedIn()">
            <span @click="logout">退出登录</span>
          </el-menu-item>

          <el-menu-item v-else>
            <router-link to="/login">登录</router-link>
          </el-menu-item>
        </el-menu>
      </el-header>
      <br>
      <el-container style="margin-left: -10px;margin-top: -7px">
        <el-aside width="200px" style="height: 100%;">
          <el-menu
              background-color="#545c64"
              text-color="#fff"
              active-text-color="#ffd04b"
              class="menu-list">
            <el-collapse  style="margin-left: 20px">
              <el-collapse-item  title="航班管理" name="1">
                <router-link to="/AdminFlight">
                  <el-menu-item index="1">
                    <i class="el-icon-edit-outline"></i>
                    <span >航班管理</span>
                  </el-menu-item>
                </router-link>
                <router-link to="/AdminTicket">
                  <el-menu-item index="1">
                    <i class="el-icon-edit-outline"></i>
                    <span >机票管理</span>
                  </el-menu-item>
                </router-link>
                <router-link to="/AdminFood">
                  <el-menu-item index="1">
                    <i class="el-icon-edit-outline"></i>
                    <span >食品管理</span>
                  </el-menu-item>
                </router-link>
              </el-collapse-item>
            </el-collapse>
            <el-collapse  style="margin-left: 20px">
              <el-collapse-item  title="航线管理" name="1">
                <router-link to="/AdminAirline">
                  <el-menu-item index="1">
                    <i class="el-icon-edit-outline"></i>
                    <span >航线管理</span>
                  </el-menu-item>
                </router-link>
                <router-link to="/AdminPlane">
                  <el-menu-item index="1">
                    <i class="el-icon-edit-outline"></i>
                    <span >飞机管理</span>
                  </el-menu-item>
                </router-link>
                <router-link to="/AdminCity">
                  <el-menu-item index="1">
                    <i class="el-icon-edit-outline"></i>
                    <span >城市管理</span>
                  </el-menu-item>
                </router-link>
              </el-collapse-item>
            </el-collapse>
            <el-collapse  style="margin-left: 20px">
              <el-collapse-item  title="用户管理" name="1">
                <router-link to="/AdminTraveller">
                  <el-menu-item index="1">
                    <i class="el-icon-edit-outline"></i>
                    <span >用户管理</span>
                  </el-menu-item>
                </router-link>
              </el-collapse-item>
            </el-collapse>
            <el-collapse  style="margin-left: 20px">
              <el-collapse-item  title="订单管理" name="1">
                <router-link to="/AdminOrder">
                  <el-menu-item index="1">
                    <i class="el-icon-edit-outline"></i>
                    <span >订单管理</span>
                  </el-menu-item>
                </router-link>
              </el-collapse-item>
            </el-collapse>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
      <!-- 底部 -->
      <el-footer>
        <p>&copy; 2024 厦门航空.</p>
      </el-footer>
    </el-container>
  </div>
</template>

<script>

import axios from "axios";

export default {
  name: "HomeManagement",
  data() {
    return {
      username:  "",
      token: localStorage.getItem("token") || "",
      userInfo: null,
    };
  },
  mounted() {
    // const path = this.$route.path;
    if(!localStorage.getItem("token")){
      this.$router.push("/AdminLogin");
    }
    else{
      this.token=localStorage.getItem("token");
      axios.get("/info", {
        params: { token: this.token },
      })
          .then(response => {
            this.userInfo = response.data;
            if(this.userInfo.userType!== "admin"){
              localStorage.removeItem("token");
              location.reload();
            }
            this.username = this.userInfo.username;
          })
          .catch(error => {
            console.error("Error fetching user info:", error);
            // Handle error (e.g., redirect to login page)
            this.$router.push("/AdminLogin");
          });
    }
  },
  methods: {
    isLoggedIn() {
      return this.token !== "";
    },
    getUsername() {
      return this.username;
    },
    logout() {
      // 清空本地存储的用户信息
      localStorage.removeItem("token");
      // 跳转到登录页
      this.$router.push("/AdminLogin");
    },
  },
  created() {
  },
};
</script>

<style scoped>
.el-menu-demo {
  /*background: linear-gradient(45deg, #51cdd4, #c77959, #e5d894, #aba3d9, #bed5f5);*/
  color: #333;
  font-size: 16px;
  /*border-bottom: 1px solid #ddd;*/
  width: 100%;
}

.el-menu {
  background-color: rgba(253, 253, 253, 0) !important; /* 确保覆盖默认样式 */
}

.el-menu-item {
  color: #0e0101 !important; /* 文字颜色 */
}

.el-menu-item:hover, .el-menu-item.is-active {
  color: #ffd04b !important; /* 活动或悬浮状态的文字颜色 */
}

.header {
  background-color: #ffffff;
  border-bottom: 1px solid #eaeaea;
  padding: 0 0;
}

.logo {
  height: 50px;
  margin-left: 20px;
}
.el-footer {
  text-align: center;
  padding: 10px 0;
  background-color: rgb(154, 165, 177);
  color: goldenrod;
}
.header-right {
  float: right;
  padding-right: 50px;
}
.header-user-con {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70px;
}
.user-avator {
  margin-left: 20px;
}
.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
  cursor: pointer;
}
.user-avator img {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

</style>